/**
 * 验证 useEffect 的逻辑
 */

import React, { useState, useEffect } from 'react'
import { Button } from 'antd'

function Demo() {
  let [x, setX] = useState(0)
  let [num, setNum] = useState(100)

  useEffect(() => {
    console.log('@1', x)
    // console.log(document.getElementById('num'))
  })
  useEffect(() => {
    console.log('@2', x)
  }, [])
  useEffect(() => {
    console.log('@3', x)
  }, [x])
  useEffect(() => {
    return () => {
      console.log('@4', x)
    }
  })
  useEffect(() => {
    return () => {
      console.log('@5', num)
    }
  }, [num])

  let handleClick = () => {
    setX(x + 1)
  }

  return <div>
    <div id='num'>{x}</div>
    <Button onClick={handleClick}>新增</Button>
  </div>
}

export default Demo